<template>
	<view>
		<view class="bg w-p-100 h-100"></view>
		<view class="position-relative  px-20 top--30 w-p-100 box-sizing">
			<view class="round-6 bg-white px-15 box">
				<view class="py-15 flex flex-x-space-between border-bottom-eee">
					<text>账户余额</text>
					<text>{{USERINFO?.balance}}</text>
				</view>
				<view class="py-15 flex flex-x-space-between text-right">
					<text>账户余额</text>
					<input placeholder="请输入提现金额" placeholder-class="fs-13 text-999 " v-model="form.total_amount" />
				</view>
			</view>
			<view class="text-right pt-10">
				<text class=" text-666">最低提现金额{{WEBCONFIG?.withdrawal_minimum}}元</text>
			</view>
		</view>
		<view class="bg-white px-30 py-15 box-sizing">
			<y-tabs :list="list" @selected="selected" fixed></y-tabs>

			<view class="py-15 flex flex-column border-bottom-eee"
				v-if="form.type=='weixin'&&WEBCONFIG?.withdrawal_type=='2'">
				<text>收款二维码</text>
				<view class="bg-eee w-80 mt-10 h-80 flex flex-center  round-4" @click="upload" v-if='!form.code'>
					<view class="iconfont icon-paizhao text-999"></view>
				</view>
				<image :src='form.code' class="w-80 h-80 round-4 mt-10" v-else></image>
			</view>

			<view class="py-8 border-bottom-eee" v-if='form.type=="zfb"'>
				<input placeholder="清输入姓名" v-model="form.name" />
			</view>
			<view class="py-8 border-bottom-eee" v-if='form.type=="zfb"'>
				<input placeholder="清输入支付宝账号" v-model="form.account" />
			</view>
		</view>
		<view class="px-20 mt-30">
			<view class="btn-blue round-30 w-p-100 py-8 text-center text-white" @click="submit()">立即提现</view>
		</view>

		<view class="px-20 mt-30">
			<view class="bg-white round-10 p-15">
				<text class="mb-10 fw-600">提现说明</text>
				<mp-html :content='tags?.content'></mp-html>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue';
	import { useUserStore, useRefs, useWebConfigStore } from '@/stores'
	import { $http, $tool } from '@/utils/index'
	import { onLoad } from '@dcloudio/uni-app'
	const { WEBCONFIG } = useRefs(useWebConfigStore());
	const { USERINFO } = useRefs(useUserStore());
	const form = ref({
		type: 'weixin',
		name: '',
		account: '',
		total_amount: '',
		code: '',
		source: 'applet'
	})
	const tags = ref()
	const list = reactive([
		{ name: '微信', type: 'weixin', id: 1 },
		{ name: '支付宝', type: 'zfb', id: 2 },
	])
	onLoad(() => {
		getTags()
		getUserInfo()
	})
	const getTags = () => {
		$http.get('Tags/getDetail', { name: 'withdrawal' }).then(res => {
			tags.value = res.data
		})
	}
	const selected = (e) => {
		form.value.type = e.type
	}

	const submit = () => {
		// #ifdef H5
		form.value.source = 'offiaccount'
		// #endif
		$http.post('User/withdrawal', form.value).then(res => {
			$tool.toast('发起提现成功')
			getUserInfo()
		})
	}
	const getUserInfo = () => {
		const { setUserInfo, isLogin, clearUserInfo } = useUserStore()
		$http.get('User/getUser').then(res => {
			setUserInfo(res.data)
		})
	}

	const upload = () => {
		uni.chooseImage({
			count: 1,
			success(res) {
				console.log(res)
				$http.upload('Upload/upload', { filePath: res.tempFilePaths[0], name: 'file' }).then(res => {
					form.value.code = res.data.url
				})
			}
		})
	}
</script>

<style>
	.bg {
		background: linear-gradient(180deg, #529ef9, #3276f5);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.box {
		box-shadow: 0px 30px 40px -20px #dedfe6;
	}

	.btn-blue {
		background: linear-gradient(to right, #406eff, #629eff);
	}
</style>